<template>
	<view class="content">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="orderWrap">
			<cardListItem class="cardListItem" :cardWidth='92' :cardHeight='92' :avatar='item.thumbnail'
				:title='item.name' :price="playType=='purchase'?item.price:price" v-for="(item,index) in orderList"
				:key="index">
				<template #titleTip>
					<view class="tagLay">
						<view class="tagItem tagBg1"
							v-if="this.playType == 'lotterybox'||this.playType == 'purchasebox'">
							差额打包
						</view>
						<!-- <view class="tagItem tagBg2">
							火影联动
						</view>
						<view class="tagItem tagBg3">
							34人在抽
						</view> -->
					</view>
				</template>
			</cardListItem>
			<view class="orderInfoItem" v-for="(item,index) in order_Discount" :key="index">
				<view class="lable">
					{{item.label}}
				</view>
				<view class="value">
					- <text class="unit">￥</text>{{item.price}}
				</view>
			</view>
			
			<view class="orderInfoItem totalPrice">
				<view class="lable">
					总计
				</view>
				<view class="value">
					<text class="unit">￥</text>
					{{order_Price}}
					<!-- <template v-if="playType=='purchase'">{{price}}
					</template>
					<template v-else>{{price * orderList.length}}</template> -->

				</view>
			</view>
		</view>
		<view class="playWrap">
			<view class="title">
				付款方式
			</view>
			<view class="playItem">
				<view class="lable">
					<view class="playBg">
						<uni-icons type="weixin" color="#fff" size="16"></uni-icons>
					</view>
					<view class="playTxt">
						微信
					</view>
				</view>
				<uni-icons type="checkbox-filled" color="#FF7994" size="20"></uni-icons>
			</view>
		</view>

		<view class="tipWrap">
			<view class="title">
				付款方式
			</view>
			<view class="txt">
				1.未满18岁的消费者一切消费行为需在成年人监控下进行
			</view>
			<view class="txt">
				1.未满18岁的消费者一切消费行为需在成年人监控下进行
			</view>
		</view>
		<view class="bntWrap">
			<view class="bnt" @click="ordersCreateFn(1)">
				立即支付
			</view>
		</view>
		<view class="bntWrap">
			<view class="bnt" @click="CSverifyPayment">
				测试完成订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '订单确认',
				order_sn: '',
				price: 0,
				orderList: [],
				playType: '',
				num: undefined,
				shopId: '',
				machineId: '',
				userSelectsIds: [],
				userShare: false,
				order_Price:0,
				order_Discount:[],
			};
		},
		onLoad(e) {
			this.price = e.price;
			this.playType = e.playType;
			this.userShare = e.userShare;
			this.num = e.num || undefined;
			this.shopId = e.shopId;
			this.machineId = e.machineId;
			// this.order_sn=e.order_sn;
			// this.ordersDetailFn();
			this.getData()
		},
		methods: {
			getData() {
				let userSelects = uni.getStorageSync('userSelects');
				this.userSelectsIds = uni.getStorageSync('userSelectsIds') || []
				// 端盒购买
				if (this.playType == 'lotterybox' || this.playType == 'purchasebox') {
					this.orderList = [{
						thumbnail: JSON.parse(userSelects.showlist)[0],
						name: userSelects.name,

					}]
				} else if (this.playType == 'lottery_purchase' || this.playType == 'purchase') { //自选直购
					this.orderList = userSelects
				} else if (this.playType == 'watermark') { //水印
					this.orderList = [{
						thumbnail: userSelects.ActivityImg,
						name: userSelects.name,
					}]
				}
				this.ordersCreateFn(0)
			},
			// 测试用的修改订单状态到完成
			// {{apiurl}}v1/orders/verify-payment
			CSverifyPayment() {
				this.$http('/v1/orders/verify-payment?noauth=112233', {
					"order_no": this.order_sn,
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.navigateBack({
							delta: 2
						});

					} else {}
					this.$showToast(res.msg)
				})
			},
			// 订单-详情
			// {{apiurl}}v1/orders/detail/ND2025080702134874e8518b7d84b67f
			ordersDetailFn() {
				this.$http(`/v1/orders/detail/${this.order_sn}`).then(res => {
					console.log(res, "订单-详情");
					if (res.code == 0) {
						const data = res.data;

						// 只会显示parent_id==0的参数;
						// this.shopsDetail = res.data.shop;
						// this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})
			},
			// 预览模式 (isorder = 0)：
			// 创建订单 (isorder = 1)：
			ordersCreateFn(isorder) {
				this.$http('/v1/orders/create', {
					"type": this.playType,
					"shop_id": Number(this.shopId),
					"machine_id": Number(this.machineId),
					"num": this.num,
					images_ids: this.userSelectsIds,
					isorder: isorder
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						// 区分预览和创建
						if (isorder == 0) {
							this.order_Price = res.data.amount||0;
							this.order_Discount = res.data.discount||[];
						} else {
							this.order_sn = res.data.order_sn;
							let wechatParams = res.data.wechat_params
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: wechatParams.timeStamp,
								nonceStr: wechatParams.nonceStr,
								package: wechatParams.package,
								signType: wechatParams.signType,
								paySign: wechatParams.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}

					} else {}
					this.$showToast(res.msg)
				})
			},
			// {{apiurl}}v1/orders/ND20250815121451b1efb0b6b4deec11/pay-params
			// 订单-根据订单号码生成支付
			payParamsFn() {
				this.$http(`/v1/orders/${this.order_sn}/pay-params`).then(res => {
					console.log(res, "获取机台详情");
					if (res.code == 0) {
						const data = res.data;

						console.log(this.list, "this.list");
						// 只会显示parent_id==0的参数;
						// this.shopsDetail = res.data.shop;
						// this.is_followed = res.data.is_followed;
					} else {
						this.$showToast(res.msg)
					}
				})


			},
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.mainHeader {
		background-color: #fff;
		margin-bottom: 12upx;
	}

	::v-deep .orderWrap {
		background-color: #fff;
		padding: 28upx 0 40upx 42upx;

		.cardListItem {
			.cardItem {
				margin-bottom: 16upx;

				.itemBox .itemLeft .itemInfo .title {
					@include flexLayout(center);
				}
			}

			.tagLay {
				@include flexLayout(center);
				flex-wrap: wrap;
				row-gap: 12upx;
				column-gap: 12rpx;
				margin-left: 20upx;

				.tagItem {
					min-width: 78rpx;
					height: 28rpx;
					line-height: 28upx;
					border-radius: 4rpx;
					padding: 0 12upx;
					font-size: 12rpx;
					text-align: center;
				}

				.tagBg1 {
					background: #FFDEED;
					color: #F36BA9;
				}

				.tagBg2 {
					background: #FFDABB;
					color: #FF7400;
				}

				.tagBg3 {
					background: #DDF9ED;
					color: #18D081;
				}
			}
		}

		.orderInfoItem {
			@include flexLayout(center, space-between);
			padding-right: 40upx;
			margin-top: 34upx;

			.lable {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 27rpx;
				color: #454545;
				line-height: 38rpx;
			}

			.value {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FF7994;
				line-height: 48rpx;

				.unit {
					font-size: 26rpx;
				}
			}
		}

		.totalPrice {
			margin-top: 42upx;

			.lable {
				font-size: 32rpx;
			}

			.value {
				font-size: 44rpx;
			}
		}
	}

	.title {
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: 500;
		font-size: 28rpx;
		color: #454545;
		line-height: 38rpx;
		margin-bottom: 34upx;
	}

	.playWrap {
		padding: 20upx 54upx 30upx 42upx;
		background-color: #fff;
		margin-top: 14upx;



		.playItem {
			@include flexLayout(center, space-between);
			flex: 1 1;

			.lable {

				@include flexLayout(center, space-between);

				.playBg {
					@include setwh(40upx, 40upx);
					@include flexLayout(center, center);
					background-color: #28C445;
					border-radius: 50%;
				}

				.playTxt {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 24rpx;
					color: #454545;
					line-height: 32rpx;
					margin-left: 18upx;
				}
			}
		}
	}

	.tipWrap {
		margin-top: 14upx;
		background-color: #fff;
		padding: 28upx 54upx 32upx 42upx;

		.txt {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #454545;
			line-height: 32rpx;
			margin-bottom: 24upx;
			padding-left: 36upx;
		}
	}

	.bntWrap {
		margin: 150upx auto 112upx;
		width: 666upx;
		height: 101rpx;
		background: #FF7994;
		border-radius: 52rpx;
		font-family: SourceHanSansSC, SourceHanSansSC;
		font-weight: bold;
		font-size: 38rpx;
		color: #FFFFFF;
		line-height: 101rpx;
		text-align: center;
	}
</style>